<template>
  <div class="attribute-box attr-column">
    <!--新增规格项-->
    <div class="ab-new-item attr-column" v-for="(item, index) in newAttrItem">

      <div class="add-attr-block attr-row">
        <span class="aab-label"></span>
        <div class="aab-right attr-column">
          <div class="abb-r-cname"><input class="aab-r-input" :value="item.name" placeholder="规格类型"
              @blur="(e) => blurInput(e, index)" /></div>
          <div class="abb-r-bottom attr-row">
            <div class="abb-rb-cline"></div>
            <div class="abb-rb-cvalue attr-row">
              <div class="abb-rb-c-label" @click="addAttrNewValue(index)">添加值</div>
              <div class="abb-rb-c-input-box attr-row" v-if="item.child.length > 0">
                <div class="bb-rb-c-ib-item attr-row" v-for="(child, cidx) in item.child" :key="cidx"><input
                    class="abb-rb-c-ibi-input" :v-model="child" placeholder="规格值"
                    @blur="(e) => blurChildInput(e, index, cidx)" /><span class="abb-rb-c-ibi-close"
                    @click="clearAttrValue(index, cidx)">×</span></div>
              </div>
            </div>
          </div>
        </div>
        <span class="clear-it" @click="clearNewAttr(index)">×</span>
      </div>

    </div>
    <!---规格项添加按钮--->
    <div class="add-newattr-btn attr-row"><span class="anb-text" @click="addNewAttr">添加新规格</span></div>

    <!--规格排序显示结果--->
    <div class="atr-list-box attr-column">
      <!---头部--->
      <div class="alb-head attr-row">
        <span class="alb-h-span alb-h-title" v-if="newAttrItem.length > 0" v-for="(item, index) in newAttrItem">{{
          item.name }}</span>
        <span class="alb-h-span">图片</span>
        <span class="alb-h-span alb-h-tool" @click="batchUpdate(1)">售价🖊</span>
        <span class="alb-h-span alb-h-tool" @click="batchUpdate(2)">原价🖊</span>
        <span class="alb-h-span alb-h-tool" @click="batchUpdate(3)">库存🖊</span>
      </div>
      <!--内容-->
      <div class="alb-item attr-column">
        <div class="alb-i-block attr-row" v-for="(child, idx) in childArr" v-if="childArr.length > 0">
          <div class="alb-ib-item attr-row" v-if="newAttrItem.length == 1"> <span class="alb-ibi-li alb-ibi-li2">{{
            child }}</span></div>
          <div class="alb-ib-item attr-row" v-else><span class="alb-ibi-li alb-ibi-li2" v-for="value in child"> {{ value
          }} </span></div>
          <div class="alb-ib-item attr-row">
            <div class="alb-ibi-li"><input class="alb-ibi-input"/></div>
          </div>
          <div class="alb-ib-item attr-row">
            <div class="alb-ibi-li"><input class="alb-ibi-input" placeholder="输入售价" v-model="attrVal.sell[idx]" /></div>
          </div>
          <div class="alb-ib-item attr-row">
            <div class="alb-ibi-li"><input class="alb-ibi-input" placeholder="输入原价" v-model="attrVal.original[idx]" /></div>
          </div>
          <div class="alb-ib-item attr-row">
            <div class="alb-ibi-li"><input class="alb-ibi-input" placeholder="输入库存" v-model="attrVal.Inventory[idx]"  /></div>
          </div>
        </div>
      </div>
    </div>

    <!---批量修改弹窗-->
    <div class="attr-dialogBox attr-cloumn" v-show="batchValue.show">
      <div class="attr-db-mask" @click="closeBatchBox"></div>
      <div class="attr-db-block attr-cloumn">
        <div class="attr-db-head attr-row"><span>{{ "批量修改" + batchValue.title }}</span><span class="close"
            @click="closeBatchBox">×</span></div>
        <div class="attr-db-input attr-row"><input type="number" v-model="batchValue.upVal" placeholder="输入修改值" /></div>
        <div class="attr-db-btn attr-row"><span class="attr-db-b-btn attr-db-b-cancel" @click="closeBatchBox">取消</span><span class="attr-db-b-btn attr-db-b-confirm"  @click="confirmBatchUpdata">确定</span>
        </div>
      </div>
    </div>

  </div>
</template>
<script setup>
import { ref, computed, reactive, getCurrentInstance, nextTick, watch, toRaw } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

const currentInstance = getCurrentInstance(); //获取main.js中挂载的实例
const { $api } = currentInstance.appContext.config.globalProperties;

const pors = defineProps({
  showdialog: {
    type: Boolean,
    default: false,
  },
  list: {
    type: Object,
    default: {},
  },
  cateArr: {
    type: Array,
    default: [{ name: "请选择用户组", id: 0 }],
  },
});

//属性列表中的属性输入价格库存等
const attrVal = reactive({
  sell:[],
  original:[],
  Inventory:[],
});
//
const batchValue = ref({
  type: 1,//修改的类型值 1=>售价 2=>原价 3=>库存
  title: '',
  upVal: '', //修改该值
  show: false
});

/***
 * 商品规格：规格类型和规格值组成
 * 如， 规格类型- 尺寸、颜色等  规格值：S、L、M、白色、红色等
*/
const newAttrItem = ref([{ name: '', child: [] }]);//新增的规格项
const childArr = ref([]);//每个类型的值的组合{L,白,长袖},{L,白,短袖}等

const emits = defineEmits(["useConfirm", "useClose"]); //定义一个或多个自定义按钮事件 传递到父组件

//规格属性类型 名称 的操作
//添加新规格
const addNewAttr = () => {

  //动态添加 html
  // if(newAttrItem.value){
  //   const newInput = document.createElement('div');
  //   newInput.className = 'add-attr-block';
  //   newInput.innerHTML = '<span>65</span>'+'<input name=newArr[]"></input>';
  //   newAttrItem.value.appendChild(newInput); //加入html到标签中
  // }
  nextTick(() => {
    newAttrItem.value.push({ name: '', child: [''] }); //加入数组中
    childArr.value = cartesianProduct(); //生成笛卡尔积的组合
  })
}
//删除规格项
const clearNewAttr = (index) => {
  // 二次确认删除
  // ElMessageBox.confirm("确定要删除？", "提示", {
  //   type: "warning",
  // })
  //   .then(() => {
  //     // ElMessage.success("新增成功");
  //     newAttrItem.value.splice(index,1);//去除指定项
  //   })
  //   .catch(() => {});
  newAttrItem.value.splice(index, 1);//去除指定项
  nextTick(() => {
    childArr.value = cartesianProduct(); //生成笛卡尔积的组合
  })
}
//监听输入框 离开焦点 - 规格类型名称
const blurInput = (e, index) => {
  // console.log(e,e.target.value,"离开焦点",index);
  const value = e.target.value;
  //查询是否有重复
  // const isRepeat = newAttrItem.value.findIndex(item => item.name == value);
  // console.log(isRepeat, "是否重复")
  // if (isRepeat >= 0) {
  //   newAttrItem.value[index].name = ''; //赋值
  //   // ElMessage.error("已存在规格名称");
  // } else {
  const item = newAttrItem.value[index];
  item.name = value; //赋值
  newAttrItem.value.splice(index, 1, item);//更改数组中的值
  // }
}
//规格属性值的输入操作
//添加规格值
const addAttrNewValue = (pidx) => {
  const item = newAttrItem.value[pidx];
  item.child.push(""); //新增
  newAttrItem.value.splice(pidx, 1, item);//更改数组中的值

  // console.log(newAttrItem.value, "数据")
}
//删除规格值
const clearAttrValue = (pidx, cidx) => {
  const item = newAttrItem.value[pidx];
  item.child.splice(cidx, 1); //新增
  newAttrItem.value.splice(pidx, 1, item);//更改数组中的值

  nextTick(() => {
    childArr.value = cartesianProduct(); //生成笛卡尔积的组合
  })

}
//监听输入框 离开焦点 - 规格值
const blurChildInput = (e, pidx, cidx) => {
  // console.log(e,e.target.value,"离开焦点",index);
  const val = e.target.value;

  //为空时,删除
  if (val == '') {
    clearAttrValue(pidx, cidx);
    return;
  };
  //不为空时
  const item = newAttrItem.value[pidx];
  item.child[cidx] = val; //赋值
  newAttrItem.value.splice(pidx, 1, item);//更改数组中的值

  childArr.value = cartesianProduct(); //生成笛卡尔积的组合
  addAttrNewValue(pidx);//新增
}
//生成 笛卡尔积 组合
const cartesianProduct = () => {
  if(!newAttrItem.value) return;
  var res = newAttrItem.value[0].child; //默认第一个数据
  if (newAttrItem.value.length > 1) {
    var arr = [];
    for (var i = 0; i <= (newAttrItem.value.length - 1); i++) {
      arr.push(newAttrItem.value[i].child);
    }
    res = arr.reduce((acc, current) => {
      const result = [];
      // console.log(acc,current,"值1")
      for (const a of acc) {

        for (const c of current) {
          //  console.log(a,c,"666")
          if (Array.isArray(a)) {
            result.push([...a, c]);
          } else {
            result.push([a, c]);
          }

        }
      }
      return result;
    });
  }
  console.log(res, "结果")
  return res;
}
//批量修改各个属性的值 type: 1=>售价 2=>原价 3=>库存
const batchUpdate = (type) => {
  console.log(type, "类型");
  if (type == 1) {
    batchValue.value.type = 1;
    batchValue.value.title = "售价";
  } else if (type == 2) {
    batchValue.value.type = 2;
    batchValue.value.title = "原价";
  } else {
    batchValue.value.type = 3;
    batchValue.value.title = "库存";
  }
  batchValue.value.show = true;
}
//确定修改
const confirmBatchUpdata = () => {
  console.log(batchValue.value.upVal, "修改值");
}
//关闭弹出
const closeBatchBox = () => {
  batchValue.value.show = false;
}


</script>
<style>
.attr-row {
  display: flex;
  flex-direction: row;
}

.attr-column {
  display: flex;
  flex-direction: column;
}

.attribute-box {
  width: 100%;
  max-height: 620px;
  overflow-y: scroll;
  position: relative;
}

/**按钮**/
.add-newattr-btn {
  width: 100%;
}

.anb-text {
  line-height: 35px;
  border-radius: 5px;
  background-color: #4b5563;
  color: #ffffff;
  font-size: 0.8rem;
  padding: 0px 10px;
}

/**end**/
.ab-new-item {
  padding: 5px;
  width: 90%;
  /* justify-content: center;
  align-items: center; */
}

.add-attr-block {
  width: 100%;
  background-color: #f1f1f1;
  border-radius: 5px;
  position: relative;
}

.clear-it {
  width: 20px;
  height: 20px;
  line-height: 22px;
  background-color: #ffffff;
  border-radius: 50%;
  text-align: center;
  color: #999999;
  position: absolute;
  font-size: 1.2rem;
  right: 10px;
  top: 10px;
  cursor: pointer;
}

.aab-label {
  width: 30px;
}

.aab-right {
  flex: 2;
  padding: 8px;
}

.abb-r-cname {}

.aab-r-input {
  width: 200px;
  height: 20px;
  min-height: 20px;
  border-radius: 5px;
  padding: 5px;
  font-size: 0.8rem;
}

.abb-r-bottom {
  width: 100%;
  position: relative;
}

.abb-rb-cline {
  height: 30px;
  border-bottom-left-radius: 5px;
  width: 20px;
  margin-left: 20px;
  border-left: 1px solid #DDD;
  border-bottom: 1px solid #DDD;
  position: relative;
}

.abb-rb-cvalue {
  flex: 2;
  flex-wrap: wrap;
  /* position: absolute; */
  margin-left: 5px;
  margin-top: 15px;
}

.abb-rb-c-label {
  max-height: 30px;
  line-height: 30px;
  border-radius: 5px;
  background-color: #4b5563;
  color: #ffffff;
  font-size: 0.7rem;
  padding: 0px 10px;
  margin-bottom: 10px;
}

.abb-rb-c-input-box {
  padding: 0px 10px;
  flex-wrap: wrap;
  align-items: center;
}

.bb-rb-c-ib-item {
  align-items: center;
  position: relative;
}

.abb-rb-c-ibi-input {
  min-height: 20px;
  padding: 5px;
  font-size: 0.7rem;
  border-radius: 5px;
  max-width: 80px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.abb-rb-c-ibi-close {
  position: absolute;
  right: 5px;
  top: -5px;
  padding: 3px;
  width: 10px;
  height: 10px;
  text-align: center;
  line-height: 10px;
  background-color: #999999;
  color: #ffffff;
  border-radius: 50%;
  cursor: pointer;
}

.atr-list-box {
  min-width: 90%;
  min-height: 400px;
  overflow-x: scroll;
  position: relative;
  background-color: #f1f1f1;
  border-radius: 5px;
  padding: 10px;
}

.alb-head {
  /* position: fixed; */
}

.alb-h-span {
  text-align: center;
  flex-shrink: 0;
  width: 100px;
  /* margin:2px; */
  padding: 5px 0px;
  height: 25px;
  line-height: 25px;
  border-bottom: #ffffff 1px solid;
  border-top: #ffffff 2px solid;
  border-right: #ffffff 1px solid;
  font-weight: bold;
  font-family: 1.1rem;
  color: #999999;
}

.alb-h-span:first-child {
  border-left: #ffffff 1px solid;
}

.alb-h-title {
  color: var(--el-color-primary);
}

.alb-h-tool {
  cursor: pointer;
  color: chocolate;
}

.alb-item {}

.alb-i-block {}

.alb-ib-item {}

.alb-ibi-li {
  /* margin:2px; */
  width: 100px;
  flex-shrink: 0;
  text-align: center;
  padding: 5px 0px;
  height: 25px;
  border-bottom: #ffffff 1px solid;
  border-top: #ffffff 1px solid;
  border-right: #ffffff 1px solid;
  line-height: 25px;
  color: #333333;
}

.alb-ibi-li2:first-child {
  border-left: #ffffff 1px solid;
}

.alb-ibi-input {
  width: 80%;
  background-color: #fff;
  border-radius: 5px;
  min-height: 15px;
  text-align: center;
  color: var(--el-color-primary);
}

/**弹窗**/
.attr-dialogBox {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

.attr-db-mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 8;
  background-color: rgba(0,0,0,0.2);
}

.attr-db-block {
  position: absolute;
  padding: 10px;
  border-radius: 5px;
  width: 20%;
  height: 100px;
  z-index: 10;
  background-color: #ffffff;
  top: 50%;
  left: 0;
  right: 0;
  margin: -50px auto;
}
.attr-db-head{
  padding: 5px; 
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  font-family: 1.2rem;
}
.attr-db-input{
  min-height: 20px;
  padding: 5px;
}
.attr-db-input input{
  min-height: 20px;
  background-color: #f1f1f1;
  width: 90%;
  border-radius: 5px;
  text-align: center;
  color: var(--el-color-primary);
}
.attr-db-btn{
  align-items: center;
  padding: 5px;
  justify-content: space-between;
}
.attr-db-b-btn{
  color: #ffffff;
  padding: 5px 10px;
  border-radius: 5px;
  line-height: 20px;
  height: 20px;
}
.attr-db-b-cancel{
    background-color: #DDDDDD;
}
.attr-db-b-confirm{
    background-color: var(--el-color-primary);
}
</style>